<template>
  <el-container style="height: 600px; border: 1px solid #eee">
    <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">
      国密算法工具箱 - SM4 加密解密
    </el-header>
    <el-container>
      <!-- 左侧 菜单栏 -->
      <el-aside width="230px" style="background-color: rgb(238, 241, 246); border: 1px solid #ddd;">
        <el-menu default-active="1-1">
          <el-submenu index="1">
            <template slot="title">加密解密工具</template>
            <el-menu-item index="1-1">
                <router-link to="/sm2">SM2</router-link>
              </el-menu-item>
            <el-menu-item index="1-1" @click="switchTab('text')">文本加密解密</el-menu-item>
            <el-menu-item index="1-2" @click="switchTab('image')">图片加密解密</el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/sm3">SM3</router-link>
              </el-menu-item>
              <el-menu-item index="1-3">
                <router-link to="/sm4">SM4</router-link>
              </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 右侧 内容 -->
      <el-main style="padding: 20px;">
        <div>
          <h1>SM4 加密解密验证</h1>

          <!-- 输入明文 -->
          <el-input v-model="text" placeholder="输入明文" style="margin-bottom: 10px;"></el-input>
          
          <!-- 生成密钥 -->
          <el-button @click="handleGenerateKey" type="primary" style="margin-right: 10px;">生成密钥</el-button>
          <el-button v-if="key" @click="copyKey" type="success">复制密钥</el-button>
          <p v-if="key" style="margin-top: 10px;">密钥: {{ key }}</p>

          <!-- 加密和解密按钮 -->
          <el-button @click="handleEncrypt" :loading="loading.encrypt" type="info" style="margin-top: 10px; margin-right: 10px;">
            加密
          </el-button>
          <el-button @click="handleDecrypt" :loading="loading.decrypt" type="warning" style="margin-top: 10px;">
            解密
          </el-button>
          <el-button @click="clearFields" type="danger" style="margin-top: 10px; margin-left: 10px;">清除</el-button>

          <!-- 加密数据 -->
          <p v-if="encryptedText" style="margin-top: 10px;">加密数据: {{ encryptedText }}</p>
          <el-button v-if="encryptedText" @click="copyEncryptedText" type="success" style="margin-top: 10px;">复制加密数据</el-button>

          <!-- 解密数据 -->
          <p v-if="decryptedText" style="margin-top: 10px;">解密数据: {{ decryptedText }}</p>
          <el-button v-if="decryptedText" @click="copyDecryptedText" type="success" style="margin-top: 10px;">复制解密数据</el-button>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { sm4 } from 'sm-crypto';

export default {
  data() {
    return {
      text: '',
      encryptedText: '',
      decryptedText: '',
      key: '',
      loading: {
        encrypt: false,
        decrypt: false
      }
    };
  },
  methods: {
    // 生成随机密钥
    handleGenerateKey() {
      this.key = Array.from({ length: 16 }, () =>
        Math.floor(Math.random() * 256).toString(16).padStart(2, '0')
      ).join('');
      this.$message.success("密钥生成成功");
    },
    // 加密
    handleEncrypt() {
      if (!this.key) {
        this.$message.warning('请先生成密钥');
        return;
      }
      if (!this.text) {
        this.$message.warning('请输入明文');
        return;
      }
      this.loading.encrypt = true;
      setTimeout(() => {
        this.encryptedText = sm4.encrypt(this.text, this.key);
        this.loading.encrypt = false;
        this.$message.success("加密成功");
      }, 500);
    },
    // 解密
    handleDecrypt() {
      if (!this.key) {
        this.$message.warning('请先生成密钥');
        return;
      }
      if (!this.encryptedText) {
        this.$message.warning('请先加密数据');
        return;
      }
      this.loading.decrypt = true;
      setTimeout(() => {
        try {
          this.decryptedText = sm4.decrypt(this.encryptedText, this.key);
          this.$message.success("解密成功");
        } catch (error) {
          this.$message.error('解密失败，请确认密钥和加密数据格式正确');
        }
        this.loading.decrypt = false;
      }, 500);
    },
    // 复制密钥到剪贴板
    copyKey() {
      navigator.clipboard.writeText(this.key).then(() => {
        this.$message.success("密钥已复制到剪贴板");
      });
    },
    // 复制加密数据到剪贴板
    copyEncryptedText() {
      navigator.clipboard.writeText(this.encryptedText).then(() => {
        this.$message.success("加密数据已复制到剪贴板");
      });
    },
    // 复制解密数据到剪贴板
    copyDecryptedText() {
      navigator.clipboard.writeText(this.decryptedText).then(() => {
        this.$message.success("解密数据已复制到剪贴板");
      });
    },
    // 清空所有字段
    clearFields() {
      this.text = '';
      this.encryptedText = '';
      this.decryptedText = '';
      this.key = '';
      this.$message.success("所有数据已清除");
    }
  }
};
</script>

<style scoped>
h1 {
  margin-bottom: 20px;
  color: #333;
}
p {
  word-wrap: break-word;
  word-break: break-all;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
}
</style>
